<template>
  <div style="padding: 0px 15px;" class="overflowY">
    <div class="searchGroup_list" style="padding: 0px 0px 10px 0px;margin: 0px 0px 0px 0px;">
      <el-row :gutter="20">
        <el-col :sm="12" :xl="9">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="5">
                <span class="searchListName">检索内容: </span>
              </el-col>
              <el-col :span="18">
                <el-input size="small" v-model="queryCondition.queryContent" placeholder="检索内容"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="12" :xl="9">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="5">
                <span class="searchListName">上传日期: </span>
              </el-col>
              <el-col :span="9">
                <div class="searchTime" style="width: 100%">
                  <el-date-picker
                    size="small"
                    v-model="queryCondition.uploadTimeStart"
                    type="date"
                    value-format="yyyyMMddHHmmss"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </el-col>
              <el-col :span="1">
                <span class="searchListNameOther">~</span>
              </el-col>
              <el-col :span="9">
                <div class="searchTime" style="width: 100%">
                  <el-date-picker
                    size="small"
                    v-model="queryCondition.uploadTimeEnd"
                    value-format="yyyyMMddHHmmss"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :sm="6" :xl="4">
          <div style="display: inline-block;text-align: left;width: 100%;padding-top: 11px;">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="fetchData">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="position: relative;border: 1px solid #ccc;padding:0px 0px 54px 0px;margin:0px 0px 0px 0px;position: relative;">
      <el-table
        ref="singleTable"
        :data="tableData"
        :show-header="false"
        tooltip-effect="dark"
        @row-contextmenu="rowContextmenu"
        @cell-dblclick="cellClick"
        @row-click="rowClick"
        @sort-change="sortChange"
        highlight-current-row
        height="340"
        style="width: 100%">
        <el-table-column
          prop="title"
          align="left"
          label="">
          <template slot-scope="scope">
            <div class="searchItem">
              <h3 class="searchTitle">
                <span :class="scope.row.displayIcon"></span>
                <a href="javascript:void(0);" @click="viewDoc(scope.row)">{{scope.row.title}}</a>
              </h3>
              <p v-if="scope.row.description" class="searchSynopsis" :title="scope.row.displayDescTitle">{{scope.row.displayDesc}}</p>
              <p class="searchOther"><span>{{scope.row.libraryCategoryName}}</span><i>|</i><span>{{scope.row.displayDate}}</span><i>|</i><span>{{scope.row.displaySize}}</span><i>|</i><span></span></p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="50"
          label="">
          <template slot-scope="scope">
            <div class="tableBtnBox">
              <el-tooltip class="item" effect="dark" content="下载" placement="top">
                <el-button type="success" size="mini" @click="toDownloadRecord(scope.row)" icon="el-icon-download" circle></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="position: absolute;bottom:0;left: 10px;">
        <paging :size-change="pageSizeChange"
                :current-change="pagingQuery"
                :page-sizes="pageSizes"
                :page-num="pagingArgs.currentPageNo"
                :total-num="pagingArgs.totalCount">
        </paging>
      </div>
    </div>
  </div>
</template>

<script>
  import paging from '@/components/demoAssembly/paging' // 分页
  import dateChange from '@/utils/dateChange'
  export default {
    data() {
      return {
        pageSizes: [10, 20, 30, 40],
        // 分页参数
        pagingArgs: {
          currentPageNo: 1,
          totalCount: 0
        },
        tableData: [], // 列表数据
        queryArgs: {
          sort: [
            {
              property: 'fcTime',
              direction: 'DESC'
            }
          ],
          rowBounds: {
            offset: 0,
            limit: 10
          },
          queryContent: '',
          categoryId: ''
        }, // 查询参数
        queryCondition: {
          queryContent: '',
          uploadTimeStart: '',
          uploadTimeEnd: ''
        },
        docIconType: {
          txt: 'icon-txt',
          pdf: 'icon-pdf',
          doc: 'icon-doc',
          ppt: 'icon-ppt',
          xls: 'icon-xls',
          docx: 'icon-doc',
          pptx: 'icon-ppt',
          xlsx: 'icon-xls'
        }
      }
    },
    computed: {

    },
    filters: {

    },
    props: [
      'categoryId'
    ],
    components: {
      paging
    },
    /**
     * 组件创建完成后，查询列表数据
     */
    created() {
      this.fetchData()
    },
    watch: {
      categoryId(n, o) {
        if (n) {
          this.fetchData()
        }
      }
    },
    mounted() {
      //
    },
    methods: {
      rowClick() {
        // 行单击事件
      },
      cellClick(row, column, cell, event) {
        // 列单击事件
      },
      rowContextmenu(row, column, e) {
        // 右键菜单
        window.event.returnValue = false
      },
      pageSizeChange(val) {
        this.queryArgs.rowBounds.limit = val
        this.queryArgs.rowBounds.offset = 0
        this.pagingArgs.currentPageNo = 1
        this.fetchData()
      },
      sortChange(col) {
        //
        if (col.prop) {
          let tempDirection = 'ASC'
          if (col.order === 'descending') {
            tempDirection = 'DESC'
          }
          const sort = {
            property: col.prop,
            direction: tempDirection
          }
          this.queryArgs.sort = []
          this.queryArgs.sort.push(sort)
          this.fetchData()
        }
      },
      pagingQuery(val) { // 分页
        this.queryArgs.rowBounds.offset = (val - 1) * 10
        this.pagingArgs.currentPageNo = val
        this.fetchData()
      },
      buildQueryConditions() {
        this.queryArgs.categoryId = this.categoryId

        // 检索内容
        if (this.queryCondition.queryContent != null && this.queryCondition.queryContent !== '') {
          this.queryArgs.queryContent = this.queryCondition.queryContent
        } else {
          delete this.queryArgs.queryContent
        }

        let tempQueryCondition = []

        // 上传时间开始
        if (this.queryCondition.uploadTimeStart != null && this.queryCondition.uploadTimeStart !== '') {
          const queryUploadTimeStart = {
            property: 'fcTime',
            value: this.queryCondition.uploadTimeStart,
            type: 'GE'
          }
          tempQueryCondition.push(queryUploadTimeStart)
        }

        // 上传时间结束
        if (this.queryCondition.uploadTimeEnd != null && this.queryCondition.uploadTimeEnd !== '') {
          const queryUploadTimeEnd = {
            property: 'fcTime',
            value: this.queryCondition.uploadTimeEnd,
            type: 'LE'
          }
          tempQueryCondition.push(queryUploadTimeEnd)
        }

        this.queryArgs.condition = tempQueryCondition
      },
      fetchData() { // 获取内容
        this.buildQueryConditions()
        this.$store
          .dispatch('LibraryDocQuerybyCategory', this.queryArgs)
          .then(res => {
            let records = res.data.records
            if (records) {
              records.forEach((item, index) => {
                // 格式化时间
                item.displayDate = this.timeFormat(item.fcTime)
                // 格式化文档大小
                item.displaySize = this.sizeFormat(parseInt(item.size))
                // 格式化文档简介
                let displayDesc = item.description
                let displayDescTitle = ''
                if (displayDesc && displayDesc.length > 100){
                  displayDescTitle = displayDesc
                  displayDesc = displayDesc.substring(0, 100) + '...'
                }
                item.displayDesc = displayDesc
                item.displayDescTitle = displayDescTitle

                // 图标
                item.displayIcon = 'icon-default'
                let docType = item.type
                if (docType) {
                  docType = docType.toLocaleLowerCase()
                  let docIcon = this.docIconType[docType]
                  if (docIcon) {
                    item.displayIcon = docIcon
                  }
                }
              })
            }
            this.tableData = records
            this.pagingArgs.totalCount = res.data.count
          })
          .catch(() => {

          })
      },
      sizeFormat(args) {
        let size = args
        let unit = ' B'
        if (size > 1024) {
          size = size / 1024.00
          unit = ' KB'
        }
        if (size > 1024) {
          size = size / 1024.00
          unit = ' MB'
        }
        if (size > 1024 * 1024) {
          size = size / 1024.00
          unit = ' GB'
        }
        size = Math.round(size * 1000) / 1000
        return size + unit
      },
      toDownloadRecord(record) {
        //
        // this.downloadFileSrc = record.downloadSourcePath + '?_t=' + new Date().getTime()
        let downloadElement = document.createElement('a')
        downloadElement.target = '_blank'
        downloadElement.href = record.downloadSourcePath // 此处可以通过拼接字符串的方式传递参数
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成之后移除元素
      },
      convertRecord(record) {
        this.loading = true
        this.$store.dispatch('LibraryDocConvertToPDF', record).then(res => {
          this.loading = false
          this.$message({
            type: 'info',
            message: '文件已在后台转化！'
          })
          setTimeout(this.fetchData(), 50)
        }).catch((err) => {
          console.log(err)
          this.$message({
            type: 'warning',
            message: '文件转化异常！'
          })
        })
      },
      viewDoc(record) {
        //
        if (!record.downloadpdfPath) {
          this.$confirm('该文件未被转化为可查看文件，是否进行转化删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.convertRecord(record)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消转化'
            })
          })
          return
        }
        this.$router.push({
          name: 'libraryDocByCategory',
          params: {
            id: record.id,
            record: record
          }
        })
      },
      timeFormat(time) {
        let tempDate = time
        try {
          if (time && time.length > 8) {
            // tempDate = time.substring(0, 4) + '-' + time.substring(4, 6) + '-' + time.substring(6, 8)
            tempDate = dateChange.dateChange(time)
          }
        } catch (e) {
          //
          console.info(e)
        }
        return tempDate
      }
    }
  }
</script>
<style scoped>
  .searchBoxList{
    margin-top: 10px;
  }
  .searchGroup_list .searchListName{
    font-size: 14px;
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
  }
  .searchGroup_list .searchListNameOther{
    font-size: 14px;
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    text-align: center;
    padding-left: 20%;
    padding-right: 20%;
  }
  .searchTime{
    width: 100%;
  }
  .searchTime > div{
    width: 100%;
  }

  .logonRelease_title span{
    font-size: 22px;
    color: #333333;
    display: inline-block;
  }
  .logonRelease_content{
    width: 100%;
  }
  .notSize .el-table__empty-text{
    display: none;
  }
  .tableBtnBox >>> .el-button.is-circle{
    padding: 8px !important;
  }

  .customA {
    text-decoration: underline;
  }
  .searchItem{
    width: 100%;
    line-height: 21px;
    margin: 0;
  }

  .searchItem .searchTitle{
       background: none;
       border: 0 none;
       border-collapse: collapse;
       font-weight: normal;
       height: 16px;
       line-height: 16px;
       padding: 0;
       margin: 0 0 5px 0;
       list-style-image: none;
       list-style-position: outside;
       list-style-type: none;
     }

  .searchItem .searchTitle span{
    height: 16px;
    width: 16px;
    display: inline-block;
    margin-right: 5px;
    position: relative;
    vertical-align: -2px;
    background: url('~@/assets/images/myImg/libraryDocIcon.png') no-repeat;

  }
  .searchItem .searchTitle span.icon-pdf{
    background-position: -193px -1075px;
  }
  .searchItem .searchTitle span.icon-txt{
    background-position: -193px -1180px;
  }
  .searchItem .searchTitle span.icon-doc{
    background-position: -193px -991px;
  }
  .searchItem .searchTitle span.icon-ppt{
    background-position: -193px -1138px;
  }
  .searchItem .searchTitle span.icon-xls{
    background-position: -193px -1243px;
  }
  .searchItem .searchTitle span.icon-default{
    background-position: -193px -1265px;
  }

  .searchItem .searchTitle a{
    outline: none;
    font-size: 16px;
    text-decoration: underline;
  }

  .searchItem .searchTitle a:link{
    color: blue;
  }

  .searchItem .searchTitle a:visited{
    color: purple;
  }

  .searchItem .searchTitle a:active{
    color: red;
  }

  .searchItem .searchSynopsis{
    letter-spacing: 1px;
    word-wrap: break-word;
    word-break: break-all;
    font-size: 12px;
  }

  .searchItem .searchOther{
    color: #008000;
    font-size: 12px;
  }
  .searchItem .searchOther i {
    display: inline-block;
    width: 12px;
    margin: 0px 4px;
    text-align: center;
  }
</style>

